<template>
  <div>
    <div class="userlist">
      <div class="nav">
        <div class="avator" :class="{ online: islogin }">
          <img  :src="$root.me.avator" />
        </div>
        <div>消息</div>
        <div class="content"></div>
      </div>
      <div class="user">
        <div class="item" v-for="(item, index) in friends" :key="index" @click="chooseUser(item)">
          <div class="left" :class="{online:item.isonline=='true',unread:unreadlist.indexOf(item.username)!=-1}">
            <img :src="item.avator" alt="" />
          </div>
          <div class="right">
            <span class="username">{{ item.username }}</span>
            <span class="msg"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["islogin", "users","chooseUser","unreadlist"],
  mounted() {
    console.log(this.unreadlist)
  },
  computed: {
    friends: function () {
      if (this.$root.me == null) {
        return [];
      } else {
        return this.users.filter((item) => {
          return item.username != this.$root.me.username;
        });
      }
    },
  },
};
</script>

<style scoped>
 .unread{
       position: relative; 
    }
 .unread::before{
        position: absolute;
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background: lightcoral;
        bottom:2px;
        right: -1px;
    }

.nav {
  display: flex;
  padding: 4px 10px;
  justify-content: space-between;
  background-color: skyblue;
}
.nav div:nth-child(2) {
  line-height: 50px;
  color: snow;
}

.avator {
  filter: grayscale(1);
}

.avator img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.left {
  filter: grayscale(1);
}

/deep/ .online {
  filter: grayscale(0);
}

.user .item {
  display: flex;
  align-items: center;
  background-color: #efefef;
  border-bottom: 1px solid #fff;
  height: 70px;
  padding: 2px 5px;
}
.left img {
  width: 60px;
  height: 60px;
  border-radius: 5px;
}
.right {
  margin-left: 10px;
  font-size: 14px;
  font-weight: bold;
}
</style>